<template>
  <div class="article-suspended-panel">
    <ul class="btn-list">
      <li class="panel-btn panel-btn-count" :class="[isLike ? 'panel-like-btn--active' : 'panel-like-btn']" @click="$emit('setgood-handler')" :data-count="likeCount">
      </li>
      <li class="panel-btn panel-comment-btn panel-btn-count" @click="scrollIntoComment" :data-count="commentCount">
      </li>
      <li class="panel-btn panel-collect-btn">
      </li>
      <li class="panel-share-title">分享</li>
      <li class="panel-btn panel-weibo-btn" @click="weiboShare">
      </li>
      <li class="panel-btn panel-qq-btn" @click="qqShare">
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    props: {
      likeCount: {
        type: Number,
        default: 0
      },
      commentCount: {
        type: Number,
        default: 0
      },
      isLike: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapState([
        'isTopbarBlock'
      ])
    },
    data() {
      return {
      }
    },
    created() {
    },
    methods: {
      // 跳转到评论区
      scrollIntoComment() {
        let offsetTop = document.querySelector('.detail-block .comment-area').offsetTop
        window.scrollTo({
          top: offsetTop + (this.isTopbarBlock ? -80 : 0)
        })
      },
      // qq分享
      qqShare() {
        let info = this.$parent.articInfo
        if (info && info.originalUrl) {
          let title = `${info.title} - ${info.user.username} - 掘金专栏`
          let url = info.originalUrl
          let summary = info.content
          let pic = encodeURIComponent(info.screenshot || 'https://user-gold-cdn.xitu.io/2019/11/29/16eb707805061e9e?w=1000&h=675&f=jpeg&s=99661')
          window.open(`https://connect.qq.com/widget/shareqq/index.html?title=${title}&url=${url}&summary=${summary}&pics=${pic}&site=掘金`, '_blank', 'noopener noreferrer')
        }
      },
      // 微博分享
      weiboShare() {
        let info = this.$parent.articInfo
        if (info && info.originalUrl) {
          let title = `${info.title} - ${info.user.username} - 掘金专栏`
          let url = info.originalUrl
          let pic = encodeURIComponent(info.screenshot || 'https://user-gold-cdn.xitu.io/2019/11/29/16eb707805061e9e?w=1000&h=675&f=jpeg&s=99661')
          window.open(`https://service.weibo.com/share/share.php?title=${title}&url=${url}&pic=${pic}`, '_blank', 'noopener noreferrer')
        }
      }
    },
  }
</script>

<style lang='scss' scoped>
  .article-suspended-panel{
    position: fixed;
    top: 200px;
    left: 120px;

    .btn-list{
      font-size: 12px;
      text-align: center;
    }

    .panel-share-title{
      margin: 30px 0 12px;
      color: #c6c6c6;
    }

    .panel-btn{
      position: relative;
      width: 36px;
      height: 36px;
      margin-bottom: 12px;
      border-radius: 50%;
      background-color: #fff;
      background-repeat: no-repeat;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.04);
      cursor: pointer;

      &.panel-like-btn{
        background-position: 53% 46%;
        background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/zan.b4bb964.svg);

        &:hover{
          background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/zan-hover.91657d6.svg);
        }
      }

      &.panel-comment-btn{
        background-position: 50% 55%;
        background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/comment.7fc22c2.svg);

        &:hover{
          background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/comment-hover.1074e67.svg);
        }
      }

      &.panel-collect-btn{
        background-position: 50%;
        background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/collect.1db122b.svg);

        &:hover{
          background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/collect-hover.5d446a7.svg);
        }
      }

      &.panel-weibo-btn{
        background-position: 50%;
        background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/weibo.2076a57.svg);

        &:hover{
          background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/weibo-hover.9abf502.svg);
        }
      }

      &.panel-qq-btn{
        background-position: 50%;
        background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/qq.0834411.svg);

        &:hover{
          background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/qq-hover.d11dd84.svg);
        }
      }

      &.panel-btn-count:after{
        content: attr(data-count);
        position: absolute;
        top: 0;
        left: 75%;
        padding: 1px 4px;
        font-size: 12px;
        text-align: center;
        line-height: 1;
        white-space: nowrap;
        color: #fff;
        background-color: #b2bac2;
        border-radius: 8px;
        transform-origin: left top;
        transform: scale(.75);
      }

      &.panel-like-btn--active{
        background-position: 53% 46%;
        background-image: url(https://b-gold-cdn.xitu.io/v3/static/img/zan-active.337b9a0.svg);

        &:after{
          color: #fff;
          background-color: $success-2;
        }
      }
    }
  }
</style>
